<template>
    <div class="main-content audit-container">
        <a-table :columns="columns" :data-source="logs" :row-key="'id'" :ellipsis="true">
            <!--suppress HtmlUnknownAttribute -->
            <template v-slot:expandedRowRender="record">
                <p>{{ record }}</p>
            </template>
        </a-table>
    </div>
</template>

<script>
    // 1. 定义表头.
    const columns = [
        { title: 'Application', dataIndex: 'projectName', key: 'projectName' },
        { title: 'Instance', dataIndex: 'instanceName', key: 'instanceName' },
        { title: 'Time', dataIndex: 'createTime', key: 'createTime' },
        { title: 'Event', dataIndex: 'eventDescription', key: 'eventDescription' },
    ];

    export default {
        name: 'Audit',
        computed: {
            logs() {
                return this.$store.state.audit.events;
            },
        },
        data() {
            return {
                columns,
            };
        },
        mounted() {
            this.$store.dispatch('audit/loadEvents');
        },
    };
</script>

<style lang="scss" scoped>
    .audit-container {
        padding: 24px;
        width: 100%;

        td > p {
            width: 1200px;
            overflow: hidden;
        }
    }
</style>
